<template>
	<view class="search x-f" :style="{top:search_top}" :class="isBorder==true? 'search_bg': ''">
		<image class="logo" :src="search.logo"></image>
		<view class="search-list x-f" :style="{background:input_bg}" :class="isBorder==true? 'search_border': ''">
			<image class="search-img" :src="search.search"></image>
			<input @tap.stop="jump(searchUrl)" type="text" placeholder="输入搜索的商品" disabled="disabled" />
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			search: {
				type: Object,
				default: {
					logo: '',
					search: '',
					message: ''
				}
			},
			message_show: {
				type: Boolean,
				default: false
			},
			input_bg: {
				type: String,
				default: '#FFFFFF'
			},
			
			//整个搜索宽度
			// width_s: {
			// 	type: String,
			// 	default: '100%'
			// },
			
			// //边框
			// border_s: {
			// 	type: String,
			// 	default: ''
			// },
			
			// top: {
			// 	type: Number,
			// 	default: 0
			// },
			
			isBorder: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				searchUrl: "/pages/search/index"
			}
		},
		computed: {
			
		},
		methods: {
			jump(path, params) {
				this.$Router.push({
					path: path,
					params: params
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	
	.search {
		padding: 0 24rpx;
		// position: relative;
		z-index: 999;
		.search_border {
			border: 1px solid #F5F5F5;
			top: 50px;
			z-index: 99;
			width: 80%;
		}
		
		.logo {
			width: 64rpx;
			height: 64rpx;
		}

		.news_logo {
			width: 64rpx;
			height: 64rpx;
		}

		.search-list {
			flex: 1;
			height: 64rpx;
			// background: #fff;
			border-radius: 32rpx;
			margin: 0 0 0 22rpx;
			padding-left: 36rpx;

			.search-img {
				width: 32rpx;
				height: 32rpx;
				padding-right: 24rpx;
			}

			input {
				margin-left: 0rpx;
			}
		}

		.message {
			width: 42rpx;
			height: 42rpx;
		}
	}
	
	.search_bg {
		// padding: 50rpx 20rpx 24rpx;
		position: -webkit-sticky;
		position: sticky;
		top: -5rpx;
		z-index: 99;
		width: 65%;
	}
</style>
